<template>
	<view class="event-detail">
		<u-navbar :title="detail.competitionName" @leftClick='leftClick'
		:placeholder='true' :bgColor="bgColor" :titleStyle="{color:'#fff'}" leftIconColor="#fff">

		</u-navbar>

	<view >


		<view v-if="detail.liveStatus == 1">
			<live-player id='livePlayer' style="width: 100%;" :src='detail.liveRtmp' mode="live" autoplay   background-mute
			 @statechange='statechange' @netstatus='netstatus' @error="error"
			   @fullscreenchange='fullscreenchange'></live-player>
			   <view class="fixtop" :style="{top:`${topst}px`}">在线人数:{{sjNum}}</view>
		</view>
		<BannerList v-else :bannerList="swiperList" :videourl='videourl'></BannerList>
		<view class="warp-top getmain" style="text-align: center;">
			<view class="warp-top-top" >
				<view class="u-line-1">{{detail.competitionName}}</view>
				<!-- <view class="warp-top-top-time" v-if="detail.competitionStatus == 0">未开始</view>
				<view class="warp-top-top-time" v-if="detail.competitionStatus == 1">进行中</view>
				<view class="warp-top-top-time" v-if="detail.competitionStatus == 2">已结束</view> -->
			</view>
			<view class="warp-top-top">
				<view class="u-line-1">主办方：{{detail.organizer}}</view>
				<!-- <view class="warp-top-top-time">城市</view> -->
			</view>
			<view class="warp-top-top">
				<view class="u-line-1">活动时间：{{detail.startTime}}~{{detail.endTime}}</view>

			</view>
		</view>
		<view class="warp-center-player">
			<view class="warp-center-player-list">
				<view>总选手</view>
				<view class="shu">{{detail.totalNumber}}</view>
			</view>
			<view class="warp-center-player-list" >
				<view>总投票数</view>
				<view class="shu">{{detail.totalVote}}</view>
			</view>
			<view class="warp-center-player-list">
				<view>总访问数</view>
				<view class="shu">{{detail.totalBrowse}}</view>
			</view>
		</view>

			<u-sticky >
				<view style="padding: 30rpx 0;background: #000;">
			     <u-tabs :list="tabLIst" :current='current' @click="tabclick"  lineColor='#fff' :activeStyle="{color:'#fff'}"></u-tabs>
			   </view>
			  </u-sticky>
			<!-- <view class="warp-center-tabs">
				<view v-for='(item,index) in tabPlayerList' :key='index' @click="tapPlayerTabs(index)"
					:class="['warp-center-tabs-list',index == current ? 'active':'']">
					{{item}}
				</view>
			</view> -->

		<view class="warp-bottom-palyer" v-if="current == 0	">
			<view v-for="(item,index) in playerList" :key='index' class="warp-bottom-palyer-list" @click="tapplayer(item,index)">
				<image class="header" :src="item.playerHeadPortrait"></image>
				<view class="center ">
					<view class="u-line-1">选手名称:{{item.playerName}}</view>
					<view class="u-line-1">选手编号:{{item.playerNo}}</view>
					<view>总投票数:{{item.totalVote}}</view>
					<view>当前排名:{{index+1}}</view>
				</view>
				<view class="vote" @click.stop="tapVote(item,index)">投票</view>
			</view>

		</view>
		<view class="warp-bottom-palyer" v-if="current == 1">
			<template v-if="detail.joinType == 2">
				 	<view style="display: flex;justify-content: center;background-color: #fff;padding: 40rpx 0;">
						<!-- <u-steps current="1" direction="column">
							<u-steps-item
							v-for="(item,index) in ProgramProcessList" :key="item.id"
							@click.stop='tapProcess(item)'
							>

								   <view  slot="title" style="color: #333;">
								   				 {{item.programName}}
								   </view>
								    <view  slot="desc" style="color: #eee;">
								   		  {{item.programType}}
								    </view>

							</u-steps-item>

						</u-steps> -->
						<time-axis :dataArray='ProgramProcessList' @change='tapProcess'></time-axis>
					</view>

			</template>
			<template v-else>
				 <view class="warp-bottom-palyer-list" v-for="(item,index) in programList" :key='index'>
				 	<view class="jiemu">
				 		<view class="warp-bottom-palyer-list-jiemu">
				 			<view class="u-line-1">
				 				节目名称：<text v-if='item.institutionName'>{{item.institutionName}}—</text>{{item.programName}}
				 			</view>
				 			<view>
				 				票数：{{item.totalVote}}
				 			</view>
				 			<view v-if="detail.scoreStatus == 1">
				 				评分：{{item.programScore}}
				 			</view>
				 		</view>
				 		<view class="warp-bottom-palyer-list-jiemur">
				 			<!-- <view>编辑</view> -->
				 			<view style="background: #e7ad50;" @click="tapProgram(item)">选手列表</view>
				 		</view>
				 	</view>
				 </view>
			</template>

		</view>

		<view class="u-content" v-if="current == 2">
			 	<u-parse :content="content"></u-parse>
		</view>

		<view class="u-content" v-if="current == 3">
			 	<view class="video">
			 		 <view class="video-list" v-for="(item,index) in videoList" :key='index' @click="tapPlay(item)">
			 			  <image class="video-list-stop" src="/static/play.png"></image>
			 			  <image class="video-list-img" :src="item.coverUrl"></image>
			 		 </view>
			 	 </view>

			 	<video id='myVideo' :class="[fullScreen ? 'show' :'hide']"  :src="mpUrl" autoplay="true"
			 	@fullscreenchange="tapfullScreen"  @ended="closeVideo"  controls></video>
		</view>
        <view style="margin-top: 20rpx;" v-if="current == 4">
        	 	 <!-- <u-album :urls="img"></u-album> -->
				 <view class="img-list" v-for="(item,index) in imgList" @click="prveImg(item)" :key="index">
					 <image :src="item.coverUrl"></image>
				 </view>
        </view>
		<view class='apply'>
			<view v-if='detail.joinType != 0' class='gohot' @click='tapjigou' >
				<text>机构报名</text>
			</view>
			<view class='gohot'>
				<view class='shop' v-if='detail.competitionStatus == 0'>报名还未开始</view>
				<view class='shop sunb' v-if='detail.competitionStatus == 1' hover-class="sunba" @click='tapSign'>立即报名
				</view>
				<view class='shop' v-if='detail.competitionStatus == 2'>报名截止</view>
			</view>
		</view>

		<!-- <uni-fab :pattern="pattern" :content="content" horizontal="right" vertical="bottom" @trigger="trigger">
		</uni-fab> -->
       <!-- <view :class="[fullScreen ? 'show' :'hide']">
			 <live-player id='livePlayer' :src='detail.liveRtmp' mode="live" autoplay   background-mute
			  @statechange='statechange' @netstatus='netstatus' @error="error"
			    @fullscreenchange='fullscreenchange'></live-player>
		</view> -->
		<view class='h-top' @click='tapCoupons'>
		   <view class='h-ckeii'>入场券</view>
		 </view>
       <view style="height: 100rpx;"></view>
	</view>
  </view>

</template>

<script>
	import BannerList from '@/components/bannerList/bannerList.vue';
	import VideoList from './components/videoList.vue';
	import timeAxis from '@/components/time_axis/time_axis.vue'
	import {
		getCompetititonDetailApi,
		getCompetitionPlayerListApi,
		getCompetitionPlayerVoteApi,getInstitutionProgramListApi,
		getCompetititonintroduceApi,getCompetititonfileApi,getInstitutionProgramProcessApi,
		getCompetitionPlayerentranceCouponsApi
	} from '@/config/api.js'
	export default {
		components: {
			BannerList,
			VideoList,
			timeAxis
		},
		data() {
			return {
				swiperList: [],
				tabLIst: [
					{name:'选手列表'},
					{name:'节目排行榜'},
					{name:'赛事简介'},
					{name:'赛事视频'},
					{name:'照片直播'}
				],
				current: 0,
				id: '',
				detail: {},
				pageNum: 1,
				playerList: [],
				programList:[],
				pattern: {
					buttonColor: '#e8565c'
				},
				content: [
					{
						text: '赛事介绍',
						// iconPath: 'https://imagesize.hknet-inc.com/sp/files/edf22ad8-f7dc-4c2d-a171-809c7f7df148.png'
					},
					{
							text: '赛事直播',
							// iconPath: 'https://imagesize.hknet-inc.com/sp/files/0e5d34fd-e3eb-442f-8a91-cc2d99f055e5.png'
					}
				],
				modex:["push", "pop"],
				fullScreen:false,
				content:'',
				videoList:[],
				fileType:0,
				imgList:[],
				img:[],
				pageSize:120,
				mpUrl:'',
				fullScreen:false,
                bgColor:'#000000',
				videourl:'',
				ProgramProcessList:[],
				sjNum:0,
				topst:100
			};
		},
		onLoad(option) {
			console.log(option,'option')
			uni.showLoading({})
			if(option.q){
			 this.id =	decodeURIComponent(option.q).split('=')[1]

			}else{
				this.id = option.id
			}
			uni.showLoading({

			})


		},
		onShow() {

			this.pageNum = 1
			this.playerList =[]
			this.getDetail()
			this.sjNum = Math.floor(Math.random()*1000 + 2500);
			console.log(uni.getSystemInfoSync())
			this.topst = uni.getSystemInfoSync().safeArea.top + 50
		},
		onReady() {
			// #ifndef MP-ALIPAY
			this.livePlayerContext = uni.createLivePlayerContext('livePlayer',this)
			// this.livePlayerContext.stop()
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		onPullDownRefresh() {
			uni.showLoading({

			})
			this.pageNum = 1
			this.playerList =[]
			this.getDetail()
		},
		methods: {
			//入场券
			tapCoupons(){
				this.$checkLogin().then(res=>{
					getCompetitionPlayerentranceCouponsApi({id:this.id}).then(res=>{
						console.log(res)
						uni.$u.route({
							url: '/pages/home/home/player-detail',
							params: {
								competitionId: this.id,
								sId: '',

								type:2,
							}
						})
					}).catch(err=>{
						console.log(err)
						if(err.code == 10018){
							this.$u.toast('无入场券')
						}
					})
				})

			},
			prveImg(e){
				let list= this.imgList.map(i=>i.fileUrl)
				if(this.id == 135){
					uni.navigateTo({
						url:'/pages/home/home/webView/webView'
					})
					return
				}
			  uni.previewImage({
			  	urls:list,
				current:e.fileUrl
			  })
			},
			getColor(){
				return this.getAllColor()
			},
			leftClick(){
			   uni.navigateBack({
			   	delta:1
			   })
			},
			tapProcess(e){
				uni.$u.route({
					url:'/pages/home/home/playerList',
					params:{
						competitionId:this.id,
						institutionId:e.institutionId,
						programId:e.id,
						joinType:2
					}
				})
			},
			trigger(e){
				if(e.index == 1){
					  if(this.detail.liveStatus == 1){
						  this.livePlayerContext.requestFullScreen();
						  this.livePlayerContext.play()
						  this.fullScreen =true
					  }
				}else if(e.index == 0){
					uni.navigateTo({
						url:'/pages/home/home/eventIntroduce?id=' +this.id
					})
				}
			},
			fullscreenchange(e){
				console.log(e.detail.direction,'fullScreen')
				var isFull = e.detail.fullScreen;
				if(e.detail.direction == 'horizontal'){
					 this.fullScreen =false
					// this.livePlayerContext.stop()
					setTimeout(()=>{
						this.livePlayerContext.pause()
					},200)

				}
			},
			tapVote(e,index){
			   uni.$u.route({
				   url:'/pages/home/home/playerVote',
				   params:{
					   playerId:e.id,
					   competitionId:e.competitionId,
					   institutionId:e.institutionId
				   }
			   })
			},
			statechange(e){
			   console.log(e,'statechange')
			},
			netstatus(e){

			},
			error(e){
				console.log(e,'error')
			},
			tapPlay(e){
			     uni.previewMedia({
					 sources:[{
						 type:'video',
						 url:e.fileUrl
					 }]

				 })
				// this.mpUrl = e.fileUrl
				// this.fullScreen = true
				// this.markShow =true
				// this.videoContext.requestFullScreen();
			},
			/**关闭视屏 */
			closeVideo() {
			  //执行退出全屏方法
			  this.videoContext.exitFullScreen();
			},
			/**视屏进入、退出全屏 */
			tapfullScreen(e){
				console.log(e)
			  var isFull = e.detail.fullScreen;
			  //视屏全屏时显示加载video，非全屏时，不显示加载video

			    this.fullScreen=isFull

			},
			tabclick(e){
				if(e.index == 1 && this.detail.joinType == 0){
					 uni.$u.toast('当前赛事没有节目')
					return
				}
				console.log(e)
				this.current = e.index
				this.pageNum = 1
				if(this.current == 2){
					 this.getIntroduce()
				}else if(this.current == 3){
					this.fileType = 0
					this.getVideo()
				}else if(this.current == 4){
					
					 this.fileType = 1
					 this.imgList=[]
					 this.getVideo()
				}
			},


			getDetail() {
				getCompetititonDetailApi({
					id: this.id
				}).then(res => {
					let url = res.competitionImgUrl.split(',')
                    this.swiperList = []
					url.map(item => {
						let obj = {}
						obj.img = item
						this.swiperList.push(obj)

					})
					this.detail = res
					uni.setNavigationBarTitle({
						title:res.competitionName
					})
					this.videourl= res.competitionVideoUrl
					if(res.joinType == 2){
						this.getProgramProcess()
					}else{
						this.getProgramList()
					}
					uni.hideLoading()
				})

			},
			//选手列表
			getplayerList() {
				getCompetitionPlayerListApi({
					competitionId: this.id,
					pageNum: this.pageNum,
					pageSize:20,
				}).then(res => {
					this.playerList.push(...res.records)
				})
			},
			//节目列表
			getProgramList(){
				getInstitutionProgramListApi({
					competitionId: this.id,
					institutionId:''
				},{custom:{toast:false}}).then(res=>{
					this.getplayerList()
					this.programList =res
				})
			},
			//节目进程
			getProgramProcess(){
				getInstitutionProgramProcessApi({
					competitionId: this.id,
				}).then(res=>{
					this.ProgramProcessList = res
					this.getplayerList()
				})
			},
			//选手列表
			tapProgram(e){
				uni.$u.route({
					url:'/pages/home/home/playerList',
					params:{
						competitionId:this.id,
						institutionId:e.institutionId,
						programId:e.id
					}
				})
			},
			//赛事简介
			getIntroduce(){
				getCompetititonintroduceApi({
								 id:this.id
				}).then(res=>{
					this.content = res

				})
			},
			//赛事视频
			getVideo(){
				getCompetititonfileApi({
					 pageNum:this.pageNum,
					 pageSize:this.pageSize,
					 competitionId:this.id,
					 fileType:this.fileType
				}).then(res=>{
					if(this.fileType == 0){
						this.videoList = res.records
					}else{
						if(this.pageNum != 1){
							this.imgList.push(...res.records)
							this.img = this.imgList.map(i=>i.fileUrl)
						}else{
							this.imgList = res.records
							this.img = this.imgList.map(i=>i.fileUrl)
						}

					}

				})
			},
			tapplayer(e, index) {
				let sId = ''
				if (index > 0) {
					 sId = this.playerList[index - 1].id
				}
				console.log(e,sId,this.playerList[index - 1])
				uni.$u.route({
					url: '/pages/home/home/player-detail',
					params: {
						competitionId: this.id,
						sId: sId,
						playerId: e.id
					}
				})
			},

			tapSign() {
				uni.navigateTo({
					url: '/pages/apply/palyer-apply/palyer-apply?competitionId=' + this.id
				})
			},
			tapjigou(e) {
				uni.navigateTo({
					url: '/pages/program/institutions-list?competitionId=' + this.detail.id
				})
			},
			tapPlayerTabs(e) {
				this.current = e
				// this.playerList = []
				if (e == 0) {
					// this.getplayerList()
				} else if (e == 1) {

				}
			}
		},
		onShareAppMessage() {
			 return{
				 title:this.detail.competitionName,
				 path:'/pages/home/home/homeDetail?id=' + this.id
			 }
		},
	    onReachBottom() {
	    	this.pageNum++
			if(this.current == 0){
				this.getplayerList()
			}else if(this.current == 4)	{
				this.getVideo()
			}

	    }

	}

</script>

<style lang="scss" scoped>
	/deep/.u-navbar__content__title{
		color: #fff !important;
	}
	.warp-top {
		padding: 30rpx;
		background-color: #fcfbfa;

		.warp-top-top {

			margin-bottom: 10rpx;
			display: flex;
			justify-content: space-between;

			>view:nth-child(1) {
				flex-grow: 0;
				flex: 1;
			}

			&-time {
				margin-left: 10rpx;
				color: $uni-color-primary;
			}

		}
	}

	.warp-center-player {
		padding: 30rpx;

		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;

		&-list {
			.shu {
				margin-top: 20rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}

	.warp-center-tabs {
		border: 1px solid $uni-color-primary;
		background-color: #FFFFFF;
		display: inline-block;
		height: 58rpx;
		border-radius: 10rpx;

		// padding: 10rpx 10rpx;
		&-list {
			padding: 10rpx 20rpx;
			// box-sizing: border-box;
			display: inline-block;
			color: $uni-color-primary;
		}

		.active {
			color: #FFFFFF !important;
			background-color: $uni-color-primary !important;
		}
	}

	.warp-bottom-palyer {
		padding-bottom: 110rpx;
		box-sizing: border-box;

		&-list {
			border-top: 1rpx solid #dddddd;
			display: flex;
			align-items: center;
			padding: 30rpx;

			.jiemu {
				display: flex;
				justify-content: space-between;

				.warp-bottom-palyer-list-jiemu {
					width: 580rpx;

					>view {
						height: 60rpx;
						line-height: 60rpx;
					}
				}

				.warp-bottom-palyer-list-jiemur {
					display: flex;
					align-items: center;
					>view {
						margin-top: 10rpx;
						flex-direction: row;
						display: block;
						width: 130rpx;
						height: 50rpx;
						text-align: center;
						line-height: 50rpx;
						background: $uni-color-primary;
						color: #fff;
						border-radius: 20rpx;
					}
				}
			}

			.header {
				width: 158rpx;
				height: 158rpx;
				border-radius: 10rpx;

			}

			.center {
				flex: 1;

				margin: 0rpx 10rpx;

				>view {
					line-height: 50rpx;
				}
			}

			.vote {
				background-color: $uni-color-primary;
				color: #FFFFFF;
				height: 50rpx;
				width: 125rpx;
				line-height: 50rpx;
				text-align: center;
				border-radius: 10rpx;
			}
		}
	}

	.apply {
		width: 100%;
		height: 98rpx;
		background: #fff;
		text-align: center;
		line-height: 98rpx;
		color:  $uni-color-primary;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		z-index: 9;
		display: flex;
		justify-content: space-around;
	}
    .u-content{
		padding:20rpx;
	}
	.gohot {
		// display: inline-block;
		flex: 1;
		height: 100%;
		text-align: center;
	}

	.gohot_active {
		background: $uni-color-primary;
		color: #fff;
	}

	.shop {
		width: 100%;
		height: 100%;
		background: #C0C0C0;
		color: #fff;
	}

	.gohot view {
		display: inline-block;
		margin-right: 10rpx;
	}

	.gohot image {
		width: 26rpx;
		height: 28rpx;
	}

	.sunb {
		background: $uni-color-primary !important;
	}
	.show{
	   display:show;
	}
	.hide{
	   display:none;
	}
	.video{
		// display: flex;
		// flex-wrap: wrap;
	.video-list{
		width: calc((100% - 60rpx)/2);
		margin-left: 20rpx;
		height: 200rpx;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		display: inline-block;
		margin-bottom: 30rpx;
		&-img{
			width: 100%;
			height: 100%;
		}
		&-stop{
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	}

	}
	.warp{
		position: fixed;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%,-50%);
	}
	.h-top{
	  position: fixed;
	  bottom: 130rpx;
	  right:20rpx;
	  width: 192rpx;
	  height: 82rpx;
	  text-align: center;
	  background: $uni-color-primary;
	  line-height: 82rpx;
	  color: #fff;
	  border-radius: 50rpx;
	  z-index: 999;
	}
	.img-list{
		width: calc((100% - 60rpx)/2);
		margin-left: 20rpx;
		height: 200rpx;
		display: inline-block;
		>image{
			width: 100%;
			height: 100%;
		}
	}
	.fixtop{
		position: absolute;
		top: 150rpx;
		right: 20rpx;
		border: 1rpx solid #FFFFFF;
		border-radius: 20rpx;
		padding: 4rpx 10rpx;
		font-size: 20rpx;
	}
</style>
